<template>
  <div>
    <!-- 对话框 -->
    <el-dialog title="添加部门" :visible="dialogFormVisibleAdd" @close="close">
      ===={{ type }}
      <!-- <pre>{{ formAdd }}</pre> -->
      <el-form ref="ruleForm" :rules="rules" :model="formAdd">
        <el-form-item prop="name" label="部门名称" label-width="120px">
          <el-input v-model="formAdd.name" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="code" label="部门编码" label-width="120px">
          <el-input v-model="formAdd.code" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="manager" label="部门负责人" label-width="120px">
          <el-select v-model="formAdd.manager" placeholder="请选择活动区域">
            <el-option
              v-for="(item, index) in managerList"
              :key="index"
              :label="item.username"
              :value="item.id"
            /> </el-select>=={{ formAdd.manager }}
        </el-form-item>
        <el-form-item prop="introduce" label="部门介绍" label-width="120px">
          <el-input v-model="formAdd.introduce" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDepartmentApi,
  addDepartments,
  editDepartments
} from '@/api/departments'
import { getEmployeeSimple } from '@/api/employees'
export default {
  name: '',
  props: {
    dialogFormVisibleAdd: {
      type: Boolean
    },
    treeNode: {
      type: Object
    },
    type: {
      type: String
    }
  },
  data() {
    var checkNameRepeat = async(rule, value, callback) => {
      let isRepeat = false
      // if (value === '') {
      //   callback(new Error('请再次输入密码'))
      // } else if (value !== this.ruleForm.pass) {
      //   callback(new Error('两次输入密码不一致!'))
      // } else {
      //   callback()
      // }
      //  目的：输入的名称在部门名称中是否存在  有就提示
      // console.log(value, 777)
      /* 添加 获取部门 */
      // const res = await getDepartmentApi()
      // // console.log(res, 333)
      // isRepeat = res.depts.some(item => item.name == value)
      // isRepeat
      //   ? callback(
      //     new Error(`您输入的${value}此名称已存在，请再次输入其他名称`)
      //   )
      //   : callback()

      if (this.type === 'edit') {
        console.log(this.treeNode, 12)
        //  编辑  除去自己
        /* 添加 获取部门 */
        const res = await getDepartmentApi()
        isRepeat = res.depts.some(
          item => item.name === value && item.id !== this.treeNode.id
        )
        isRepeat
          ? callback(
            new Error(`您输入的${value}此名称已存在，请再次输入其他名称`)
          )
          : callback()
      } else {
        /* 添加 获取部门 */
        const res = await getDepartmentApi()
        // console.log(res, 333)
        isRepeat = res.depts.some(item => item.name === value)
        isRepeat
          ? callback(
            new Error(`您输入的${value}此名称已存在，请再次输入其他名称`)
          )
          : callback()
      }
    }

    var checkCodeRepeat = async(rule, value, callback) => {
      let isRepeat = false
      // if (value === '') {
      //   callback(new Error('请再次输入密码'))
      // } else if (value !== this.ruleForm.pass) {
      //   callback(new Error('两次输入密码不一致!'))
      // } else {
      //   callback()
      // }
      //  目的：输入的名称在部门名称中是否存在  有就提示
      // console.log(value, 777)

      if (this.type === 'edit') {
        console.log(this.treeNode, 12)
        //  编辑  除去自己
        /* 添加 获取部门 */
        const res = await getDepartmentApi()
        isRepeat = res.depts.some(
          item => item.code === value && item.id !== this.treeNode.id
        )
        isRepeat
          ? callback(
            new Error(`您输入的${value}此名称已存在，请再次输入其他名称`)
          )
          : callback()
      } else {
        /* 添加 获取部门 */
        /* 添加 获取部门 */
        const res = await getDepartmentApi()
        // console.log(res, 333)
        isRepeat = res.depts.some(item => item.code == value)
        isRepeat
          ? callback(
            new Error(`您输入的${value}此编码已存在，请再次输入其他编码`)
          )
          : callback()
      }
    }
    return {
      formAdd: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      },

      managerList: [],

      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '部门名称长度为1-50个字符',
            trigger: 'blur'
          },
          {
            trigger: 'blur',
            validator: checkNameRepeat
          }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '部门编码长度为1-50个字符',
            trigger: 'blur'
          },
          {
            trigger: 'blur',
            validator: checkCodeRepeat
          }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 300,
            message: '部门介绍长度为1-300个字符',
            trigger: 'blur'
          }
        ]
      } // 校验规则 {key: 数组}
    }
  },
  watch: {
    treeNode: {
      handler(newVal) {
        console.log(newVal, 8888)
        this.formAdd.pid = newVal.id
        // if (type === 'edit') {
        //   this.formAdd = newVal
        // }
      },
      deep: true,
      imediate: true
    }
    // type: {
    //   handler(newVal) {
    //     if (newVal) {
    //       this.formAdd = this.treeNode
    //     }
    //   },
    //   imediate: true
    // }
  },
  created() {
    this.getEmp()
    if (this.type === 'edit') {
      this.formAdd = this.treeNode
    }
  },
  methods: {
    close() {
      this.$emit('update:dialogFormVisibleAdd', false)
      this.formAdd = {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      }
      this.$emit('close')
      this.$refs.ruleForm.resetFields()
    },
    /* 获取员工信息 */
    async getEmp() {
      const res = await getEmployeeSimple()
      console.log(res, 87)
      this.managerList = res
    },
    /* 点击对话框确认按钮 */
    submitForm() {
      this.$refs['ruleForm'].validate(async valid => {
        if (valid) {
          if (this.type === 'edit') {
            await editDepartments(this.formAdd)
            this.close()
          } else {
            /* 添加 */
            //  校验成功
            console.log(this.formAdd, 666666)
            await addDepartments(this.formAdd)
            this.close()
            // this.$emit()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
